<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

    <script src="jquery-2.1.1.min.js"></script>



    <!-- vue---进行post和get请求 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style type="text/css">
        @import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

    </style>

</head>

<body>

</script>




<!-- =========================================================== -->



<!-- =========================================================== -->

<div id="app">

    <!-- Form -->
    <el-button type="button" @click="dialogFormVisible = true">新增问题</el-button>

    <el-dialog title="请填写面试中的问答信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="面试问题" :label-width="formLabelWidth">
                <el-input v-model="form.question" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="你的答案" :label-width="formLabelWidth">
                <el-input v-model="form.studentAnswer" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false,addQuestion()">确 定</el-button>
        </div>
    </el-dialog>

</div>



<div id="table">




    <template>
        <el-table
                :data="questionList"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="序号"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="question"
                    label="面试问题"
                    width="500">
            </el-table-column>
            <el-table-column
                    prop="studentAnswer"
                    label="学生回答"
                    width="500">
            </el-table-column>
            <el-table-column
                    prop="teacherAnswer"
                    label="老师回答"
                    width="500">
            </el-table-column>

            <el-table-column
                    label=""
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="update(scope.row)">修改</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    label=""
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="deleteQuestion(scope.row)">删除</el-button>
                </template>
            </el-table-column>


        </el-table>
    </template>
</div>

</body>

<script>



    // ==================================================================================================================

    var Main = {
        data() {
            return {
                dialogFormVisible: false,
                form: {
                    question: '',
                    studentAnswer: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px'
            };
        },
        methods: {
            getUrlKey1(name){
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

                var r = window.location.search.substr(1).match(reg);

                if (r != null) return unescape(r[2]); return null;
            },

            addQuestion: function (){
                var token = this.getUrlKey1("token");

                var url ='http://localhost:8080/question/addQuestion';
                var datas = {"token"            : token,
                             "question"         : this.form.question,
                             "studentAnswer"    : this.form.studentAnswer,
                };
                alert(token);
                this.$http.post(url, datas, {
                    emulateJSON: false
                }).then(function(backdatas) {
                    location.reload();
                });
                alert("添加成功");
            },
        }

    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

    // ==================================================================================================================



        window.onload = function() {

        var table = new Vue({
            el: '#table',
            data: {
                questionList: {},
                realQuestion: '',
                realStudentAnswer: ''
            },
            methods:{
                getParentParentUrlKey(name){
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                    // alert(window.parent.parent.location.href);

                    var r = window.parent.parent.location.search.substr(1).match(reg);

                    if (r != null) return unescape(r[2]); return null;
                },
                get: function() {
                    var token = this.getParentParentUrlKey("token");
                    var url = 'http://localhost:8080/question/selectAllQuestionBean?token=' + token;
                    this.$http.get(url).then(function(backdatas) {

                        // alert(window.parent.parent.location.href);
                        // 拿到code码
                        var code = backdatas.body.code;

                        // 拿到后台返回的数据
                        var dataR = backdatas.body.data;

                        // 把 dataR 给 table的roleList属性
                        table.questionList = dataR;
                        console.log(table.questionList)
                    });
                },
                update: function (rowDate) {
                    var questionId = rowDate.id;
                    table.realQuestion = rowDate.question;
                    table.studentAnswer = rowDate.studentAnswer;
                    alert("触发修改按钮");
                },
                deleteQuestion: function (rowDate) {
                    var questionId = rowDate.id;
                    var url = 'http://localhost:8080/question/deleteQuestionById';
                    var datas = {"id" : questionId,"token" : "3J/l6WRMJ7EaOIHcN6jFLA=="};
                    this.$http.post(url, datas, {
                        emulateJSON: false
                    }).then(function(backdatas) {
                        location.reload();
                    });

                    var question = rowDate.question;
                    alert("删除成功!")
                }
            },

        });
        table.get();
    }

</script>



</html>
